<template>
	<el-container>
		<el-aside width="200px">
			<div class="g-logo">
				<img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" />
				<p>双碳管理系统</p>
			</div>
			<el-menu router background-color="#1e2e3d" text-color="#fff" active-text-color="#ffd04b">
				<el-submenu index="1">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>能效管理</span>
					</template>
					<el-menu-item index="/banner">
						<i class="el-icon-menu"></i>
						<span slot="title">能效列表</span>
					</el-menu-item>
					<el-menu-item index="/banner/add">
						<i class="el-icon-menu"></i>
						<span slot="title">轮播添加</span>
					</el-menu-item>
				</el-submenu>

				<el-submenu index="2">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>商品管理</span>
					</template>
					<el-menu-item index="/goods">
						<i class="el-icon-menu"></i>
						<span slot="title">商品列表</span>
					</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-container>
			<el-header>
				<h4>首页/商城系统/Banner</h4>
			</el-header>
			<el-main>
				<!-- 子路由输出 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
export default {
	methods:{
		bindGoodsList(){
			this.$router.replace({path:'/goods'})
		}
	}
}
</script>

<style lang="css" scoped>
.el-container {
	height: 100vh;
	background-color: #fafafa;
}

.el-aside {
	background-color: #314157;
}
.el-aside .g-logo {
	display: flex;
	height: 100px;
	align-items: center;
	padding-left: 20px;
}
.el-aside .g-logo img {
	width: 30px;
	padding-right: 10px;
}
.el-aside .g-logo p {
	color: white;
}

.el-header {
	height: 70px;
	background-color: #ffffff;
	border-bottom: 2px solid #e1e1e5;
}

.el-header h4 {
	height: 70px;
	line-height: 70px;
	color: #606266;
}
</style>
